<template>
  <div class="order-card" v-if="order">
    <Divider :style="{ margin: '5px 0' }" />
    <div class="order-key">
      <div
        class="order-id"
        @click="copyStr(props.order.orderId, '订单号已复制')"
      >
        订单号：{{ props.order.orderId }}
        <!-- <svg-icon icon-class="copy" style="font-weight: 600" /> -->
      </div>
      <div :class="['order-state', stateClass(props.order.state)]">
        {{ stateToStr(props.order.state) }}
      </div>
    </div>
    <div class="shop-info">
      <div class="shop-img-list" :id="thisId">
        <div class="img">
          <div
            class="shop-item"
            v-for="(item, index) in props.order.shopCartJson"
          >
            <Image
              :key="index"
              width="4rem"
              height="4rem"
              fit="cover"
              position="center"
              :src="baseApi + item.img"
            />
            <!-- 如果只有一个商品，商品名称就在右侧，一个以上就在下面 -->
            <div class="shop-name" v-if="props.order.shopCartJson.length > 1">
              <TextEllipsis
                rows="1"
                :content="item.name"
                style="font-size: 12px"
              ></TextEllipsis>
            </div>
          </div>
          <!-- 如果只有一个商品，商品名称就在右侧，一个以上就在下面 -->
          <div
            class="shop-name-single"
            v-if="props.order.shopCartJson.length === 1"
            style="
              width: 40%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
            "
          >
            {{ props.order.shopCartJson[0].name }}
          </div>
          <!-- 等宽div -->
          <div
            v-if="shopImgListScrollWidth + 80 > bodyClientWidth"
            style="min-width: 50px; height: 96px"
          ></div>
        </div>
      </div>
      <!-- 超出显示有多少商品 -->
      <div class="plus-icon-box">
        <div class="content-text">
          <div class="price">
            {{ props.order.totalPrice }}
          </div>
          <div class="size">共：{{ props.order.shopCartJson.length }}件</div>
        </div>
      </div>
    </div>
    <!-- 待支付 -->
    <div class="btn-group" v-if="props.order.state === 0">
      <Button size="small" type="danger" @click="toPay">去付款</Button>
      <Button size="small" @click="cancelOrder">取消订单</Button>
    </div>
    <!-- 待接单 -->
    <div class="btn-group" v-if="props.order.state === 1">
      <Button size="small" @click="orderPage">等待商家接单</Button>
    </div>
    <!-- 配送中 -->
    <div class="btn-group" v-if="props.order.state === 2">
      <Button size="small" type="success" @click="orderPage">配送中...</Button>
    </div>
    <!-- 已完成 -->
    <div class="btn-group" v-if="props.order.state === 3">
      <Button size="small" type="warning" @click="againOrder">再来一单</Button>
      <Button size="small" icon="other-pay" @click="evaluateOrder">评价</Button>
    </div>
    <!-- 订单取消 -->
    <div class="btn-group" v-if="props.order.state === 4">
      <Button size="small" type="warning" @click="againOrder">再来一单</Button>
      <Button size="small" @click="orderPage">售后详情</Button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { randomString, copyStr } from "@/utils";
import { Divider, Image, TextEllipsis, Button } from "vant";
import { nextTick, onMounted, ref } from "vue";

/**后端api接口 */
const baseApi = process.env.VUE_APP_BASE_API;
const props = defineProps({
  order: {
    type: Object,
    default: null,
  },
});

const thisId = randomString(6);
const stateToStr = (state: number) => {
  switch (state) {
    case 0:
      return "待付款";
    case 1:
      return "待接单";
    case 2:
      return "配送中";
    case 3:
      return "订单完成";
    case 4:
      return "已取消";
  }
};
const stateClass = (state: number) => {
  switch (state) {
    case 0:
      return "wait-pay";
    case 1:
      return "pending";
    case 2:
      return "delivery";
    case 3:
      return "evaluate";
    case 4:
      return "cancel";
  }
};
/**商品列表长度 */
const shopImgListScrollWidth = ref(0);
/**body的宽度 */
const bodyClientWidth = document.body.clientWidth - 20;

onMounted(() => {
  nextTick(() => {
    getElementById(thisId).then((el: any) => {
      // 获取滚动条内的宽度
      shopImgListScrollWidth.value = el?.scrollWidth || el?.clientWidth || 0;
    });
  });
});
/**顾名思义 */
const getElementById = (id: string) => {
  return new Promise((resolve) => {
    const timer = setInterval(() => {
      const element = document.getElementById(id);
      if (element) {
        clearInterval(timer);
        resolve(element);
      }
    }, 10);
  });
};
/**去付款 */
const toPay = () => {
  console.log("去付款");
};
/**再来一单 */
const againOrder = () => {
  console.log("再来一单");
};
/**取消订单 */
const cancelOrder = () => {
  console.log("取消订单");
};
/**评价 */
const evaluateOrder = () => {
  console.log("评价");
};
/**订单页面 */
const orderPage = () => {
  console.log("订单页面");
};
</script>
<style lang="less" scoped>
.btn-group {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 5px;
  gap: 5px;
}
</style>
<style lang="less" scoped>
.order-card {
  background-color: white;
  border-radius: 10px;
  padding: 0 10px;
  .shop-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    .plus-icon-box {
      background-color: rgba(255, 255, 255, 0.9);
      font-size: 13px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 100;
      position: absolute;
      right: 0;
      width: 5rem;
      height: 87px;
      .content-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        .price::before {
          content: "¥";
        }
      }
    }
    .shop-img-list::-webkit-scrollbar {
      display: none;
    }
    .shop-img-list {
      width: 100%;
      overflow-x: auto;
      .img {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        height: 87px;
        overflow-y: hidden;
        .shop-item {
          /deep/img {
            border-radius: 10px;
          }
        }
      }
    }
  }

  .order-key {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    .order-id {
      font-size: 14px;
    }
    .order-state {
      font-size: 14px;
    }
    .wait-pay {
      color: #f44336;
    }
    .pending {
      color: #ff9800;
    }
    .delivery {
      color: #4caf50;
    }
    .evaluate {
      color: #2196f3;
    }
    .cancel {
      color: #999;
    }
  }
}
</style>
